<template>
  <div style="height: 100vh; display: flex; flex-direction: column; background: #EEEEEE7F">
    <van-nav-bar
        title="仪器借还"
        left-text="返回"
        left-arrow
        @click-left="router.back()"
    />

    <van-tabs v-model:active="active" style="flex-shrink: 0">
      <van-tab title="已申请">
        <div style="overflow-y: auto; height: calc(100vh - 92px);">
          <van-list
              v-model:loading="appliedLoading"
              :finished="appliedFinished"
              finished-text="没有更多了"
              @load="loadApplied"
          >
            <van-space direction="vertical" fill style="padding-top: 8px">
              <InstrumentReturnCard :data="item" v-for="item in appliedList" :key="item.id" />
            </van-space>
          </van-list>
        </div>
      </van-tab>

      <van-tab title="已归还">
        <div style="overflow-y: auto; height: calc(100vh - 92px);">
          <van-list
              v-model:loading="returnedLoading"
              :finished="returnedFinished"
              finished-text="没有更多了"
              @load="loadReturned"
          >
            <van-space direction="vertical" fill style="padding-top: 8px">
              <InstrumentReturnCard :data="item" v-for="item in returnedList" :key="item.id" />
            </van-space>
          </van-list>
        </div>
      </van-tab>
    </van-tabs>
  </div>
</template>

<script setup>
import { ref, watch } from 'vue'
import { useRouter } from 'vue-router'
import { getInstrumentLoans } from '@/apps/client/utils/instrumentApi.js'
import InstrumentReturnCard from '@/apps/client/components/InstrumentReturnCard.vue'

const router = useRouter()
const active = ref(0)
const size = 10

// 已申请状态
const appliedPage = ref(1)
const appliedList = ref([])
const appliedLoading = ref(false)
const appliedFinished = ref(false)

// 已归还状态
const returnedPage = ref(1)
const returnedList = ref([])
const returnedLoading = ref(false)
const returnedFinished = ref(false)

// 加载“已申请”数据
function loadApplied() {
  if (appliedFinished.value || appliedLoading.value) return
  appliedLoading.value = true
  getInstrumentLoans('已申请', appliedPage.value, size)
      .then((body) => {
        const data = body.data
        if (data.records.length > 0) {
          appliedList.value = appliedList.value.concat(data.records)
          appliedPage.value++
        }
        if (appliedList.value.length >= data.total) {
          appliedFinished.value = true
        }
      })
      .catch(console.error)
      .finally(() => {
        appliedLoading.value = false
      })
}

// 加载“已归还”数据
function loadReturned() {
  if (returnedFinished.value || returnedLoading.value) return
  returnedLoading.value = true
  getInstrumentLoans('已归还', returnedPage.value, size)
      .then((body) => {
        const data = body.data
        if (data.records.length > 0) {
          returnedList.value = returnedList.value.concat(data.records)
          returnedPage.value++
        }
        if (returnedList.value.length >= data.total) {
          returnedFinished.value = true
        }
      })
      .catch(console.error)
      .finally(() => {
        returnedLoading.value = false
      })
}

// 监听 tab 切换，懒加载数据
watch(active, (val) => {
  if (val === 0 && appliedList.value.length === 0) {
    loadApplied()
  } else if (val === 1 && returnedList.value.length === 0) {
    loadReturned()
  }
})

// 首次进入页面加载“已申请”
loadApplied()
</script>
